<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div class="search-item">
                <label>机构名称：</label>
                <div class="table-query-input">
                    <el-select
                        v-model="queryData.groupId"
                        filterable
                        clearable
                        placeholder="请选择机构"
                        remote
                        reserve-keyword
                        :remote-method="loadXx"
                        :loading="flag.schoolFlag"
                    >
                        <el-option
                            v-for="item in schools"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>组织结构名称：</label>
                <div class="table-query-input">
                    <el-input
                        v-model="queryData.name"
                        clearable
                        placeholder="请输入"
                    ></el-input>
                </div>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch()"
                    >搜索
                </el-button>
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                    >重置
                </el-button>
            </div>
        </div>
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('新增组织结构', editCall)"
                >添加组织结构
            </el-button>
        </div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
                default-expand-all
                :tree-props="{
                    children: 'children',
                    hasChildren: 'leaf'
                }"
                @selection-change="tableSelectionChange"
            >
                <el-table-column
                    prop="id"
                    label="组织id"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="name"
                    label="组织结构名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column
                    prop="groupName"
                    label="机构名称"
                    min-width="100"
                ></el-table-column>
                <el-table-column prop="sort" label="排序" width="80">
                    <template
                        slot-scope="scope"
                        v-loading="scope.row.opLoading"
                    >
                        <div
                            v-show="!scope.row.sortEdit"
                            @dblclick="scope.row.sortEdit = true"
                        >
                            {{ scope.row.sort }}
                        </div>
                        <el-input
                            v-show="scope.row.sortEdit"
                            v-model="scope.row.sort"
                            @blur="
                                sortEditSave(
                                    '/user/sys/department/change-sort',
                                    scope.row
                                )
                            "
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            type="text"
                            icon="el-icon-edit"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(
                                    scope.row,
                                    '组织结构信息修改',
                                    () => {
                                        editCall(scope.row);
                                    }
                                )
                            "
                            >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            class="danger"
                            type="text"
                            icon="el-icon-delete"
                            size="mini"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/sys/department/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                            >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-show="!showTreeData" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>

        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :show-close="false"
            :before-close="dialogClose"
            custom-class="one-dialog"
        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"
                class="table-edit-from"
            >
                <el-form-item label="所属机构" prop="groupId">
                    <el-select
                        v-model="dataForm.groupId"
                        filterable
                        placeholder="请选择机构"
                        remote
                        reserve-keyword
                        :remote-method="loadXx"
                        :loading="flag.schoolFlag"
                    >
                        <el-option
                            v-for="item in schools"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="组织名称" prop="name">
                    <el-input v-model="dataForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="parentId" label="上级组织">
                    <el-cascader
                        ref="parentRef"
                        v-model="dataForm.parentId"
                        v-loading="flag.parentFlag"
                        :options="parents"
                        placeholder="请输入关键词"
                        :show-all-levels="false"
                        clearable
                        filterable
                        :disabled="!dataForm.groupId"
                        :before-filter="searchParent"
                        :props="{
                            value: 'id',
                            label: 'name',
                            emitPath: false,
                            disabled: 'edit',
                            checkStrictly: true
                        }"
                        @change="
                            vl =>
                                selectParent(
                                    vl,
                                    dataForm,
                                    dataForm.parent || parents
                                )
                        "
                    >
                    </el-cascader>
                </el-form-item>
                <el-form-item label="序列" prop="sort">
                    <el-input-number
                        v-model="dataForm.sort"
                        :min="1"
                        :max="99999999"
                        label="排序"
                    ></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                    >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/user/sys/department/update')"
                    >保 存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { TablePage } from "@/layout/mixin/iVue.js";
import { mapState } from "vuex";
import { treeList2Tree } from "@/utils/index.js";
import { get, post } from "@/api/request";
import {
    fetchClassificationChildren,
    fetchClassificationFirst
} from "@/api/course";

export default {
    name: "GroupDepartment",
    components: {},
    mixins: [TablePage],
    data() {
        return {
            classificationCache: [],
            kmId: null,
            classificationProps: {
                lazy: true,
                checkStrictly: true,
                emitPath: false,
                lazyLoad: this.fetchClassification
            },
            queryData: {
                name: null,
                groupId: null
            },
            initAddForm: {
                id: null,
                name: null,
                parentId: null,
                type: null,
                sort: 100,
                schoolCode: null,
                levelType: null
            },
            schools: null,
            parents: null,
            classificationParents: null,
            flag: {
                schoolFlag: false,
                parentFlag: false,
                parent2Flag: false
            },
            dataFormRule: {
                name: [
                    {
                        required: true,
                        message: "请输入组织名称",
                        trigger: "change"
                    }
                ],
                code:[
                    {
                        required: true,
                        message: "请输入组织编码",
                        trigger: "change"
                    }
                ],
                groupId: [
                    {
                        required: true,
                        message: "请选择机构",
                        trigger: "change"
                    }
                ],
            },
            base64Logo: null
        };
    },
    computed: {
        ...mapState({
        }),
        showTreeData() {
            return Boolean(this.queryData.groupId);
        }
    },
    watch: {
        "dataForm.groupId"(groupId) {
            groupId &&
            this.loadSchoolAllDepartment(
                this.dataForm.groupId,
                null
            );
        },
        "queryData.groupId"(code) {
            if (!code) {
                this.loadXx();
            }
        }
    },
    created() {
        this.loadXx();
    },
    mounted() {},
    methods: {
        search(queryData) {
            this.loadTable("/user/sys/department/page", queryData, true);
        },
        loadXx(query) {
            return get("/user/sys/group/list", {
                name: query,
                size:1000
            }).then(res => {
                this.schools = res;
                return res;
            });
        },
        loadSchoolAllDepartment(groupId, name) {
            if (!groupId) {
                return;
            }
            return this.flagPromise(
                get("/user/sys/department/list", {
                    size: groupId ? 1000 : 10,
                    groupId,
                    name
                }).then(res => {
                    this.parents = treeList2Tree(res);
                }),
                "parentFlag"
            );
        },
        searchParent(name) {
            this.loadSchoolAllDepartment(
                this.dataForm.groupId,
                name,
            );
        },
        async editCall(row) {
            if (row) {
                return get("/user/sys/group/list", {
                    id: row.groupId
                }).then(detail => {
                    detail = detail[0];
                    if (
                        detail &&
                        !this.schools.includes(v => v.id === detail.id)
                    ) {
                        this.schools = [...detail, ...this.schools];
                    }
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped></style>
